import React from 'react';
import { Row, Col } from 'antd';
import styles from './index.less';
import PropTypes from 'prop-types';
import DOMPurify from 'dompurify';

const PanelTitle = ({
  style = {},
  title = '',
  children = null,
  labelTips = '',
  labelTipsStyle = {},
}) => {
  const safeLabelTips = DOMPurify.sanitize(labelTips) || '';
  return (
    <div className={styles.header_title} style={style}>
      <Row justify="space-between">
        <Col>
          {title}{' '}
          <span style={{ ...labelTipsStyle }} dangerouslySetInnerHTML={{ __html: safeLabelTips }} />
        </Col>
        <Col>{children}</Col>
      </Row>
    </div>
  );
};
PanelTitle.propTypes = {
  title: PropTypes.string,
  labelTips: PropTypes.string,
  style: PropTypes.object,
  labelTipsStyle: PropTypes.object,
  children: PropTypes.node,
};

export default PanelTitle;
